<template>
  <view class=" top ">
    <!-- 首页导航栏 -->
    <view class='tab'>
      <view class="cuIcon-back icon" @click="toIndex()"></view>
      <text class="title">发布任务</text>
    </view>
    <!-- 游戏种类栏 -->
    <view class="text-area">
      <scroll-view scroll-x class="scroll-x">
        <view v-for="(item,index) in tabData" :key="item.id" @click="tabIndex = item.id" class="flex-row">
          <view v-if="tabIndex == item.id" class="tab-i-sel flex-col">
            <image class="tab-i-image" :src="baseUrl() + item.icon" referrerpolicy="no-referrer"/>
            <text class="tab-i-text">{{ item.name }}</text>
          </view>
          <view v-else class="tab-i-nor flex-col">
            <image class="tab-i-image" :src="baseUrl() + item.icon" referrerpolicy="no-referrer"/>
            <text class="tab-i-text">{{ item.name }}</text>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="div-1">
      <view style="padding: 0px 16px;">
        <view class="flex-row" style="border-bottom: 1px solid #ccc;">
          <text class="left-text flex-col">性别要求</text>
          <view class="right-text flex-row">
            <view class="sex-sel flex-col">不限</view>
            <view class="sex-nor flex-col">男</view>
            <view class="sex-nor flex-col">女</view>
          </view>
        </view>
        <view class="flex-row" style="border-bottom: 1px solid #ccc;">
          <text class="left-text flex-col">期望游戏开始时间</text>
          <view class="right-text flex-row">
            <uni-datetime-picker></uni-datetime-picker>
          </view>
        </view>
        <view class="flex-row" style="border-bottom: 1px solid #ccc;">
          <text class="left-text flex-col">游戏时长</text>
          <view class="right-text flex-row">
            <view class="sex-nor flex-col">-</view>
            <text class=" tab-i-text flex-col">不限</text>
            <view class="sex-nor flex-col">+</view>
          </view>
        </view>
        <view class="flex-row" style="border-bottom: 1px solid #ccc;">
          <text class="left-text flex-col">结算价格（元）</text>
          <view class="right-text">
            <input class="text-right" type="text" placeholder="请输入">
          </view>
        </view>
        <view class="flex-row" style="border-bottom: 1px solid #ccc;">
          <text class="left-text flex-col">
            诈赔设置
            <image
                style="width: 16px; height: 16px;"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc4f73a97ac521f2f55329f648580cf48631b561c436cd7e02e32ade45826a0f8"
            />
          </text>
          <view class="right-text flex-row">
            <switch v-model="switchValue"></switch>
          </view>

        </view>
        <view class="flex-direction" style="border-bottom: 1px solid #ccc;">
          <text class="left-text flex-row">要求</text>
          <input class="flex-row" type="text" placeholder="请输入，如：微信区黄金排位，来位实力打野">
        </view>
      </view>


    </view>
    <view class="div-2">
      <view>平台声明</view>
      <text class="text_7">
        支付保证金保障双方权益，游戏结束后自动支付到接单账户
      </text>
    </view>

    <!--底部悬浮按钮-->
    <view class="div-bot">
      <view>
        <text class="text-d flex-center">免保证金下单</text>
      </view>
      <view class="div-cf flex-row justify-center">
        <view class="div-box1">
          <view>
            <text class="text_bail">保证金</text>
            <text class="text-red">￥</text>
            <text class="text-red">100</text>
          </view>
          <text class="text_12">含有2元服务费</text>
        </view>
        <view class="btn">
          <text class="text-white" @click="btnNav('/pages/work/index')">确定支付</text>
        </view>
      </view>
    </view>
  </view>

</template>

<script>

import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import {listOrder} from "@/api/attend/order";
import {listGame} from "@/api/attend/game";
import {baseUrl} from "@/config";
import OrderCard from "@/components/index/order-card.vue";
import UniDatetimePicker
  from "@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue";

export default {
  components: {UniDatetimePicker, OrderCard},
  mixins: [MescrollMixin],
  data() {
    return {
      tabIndex: 1,
      TabCur: 0,//游戏种类栏index
      highLowCur: 0,//价格高低栏index
      scrollLeft: 0,
      tabData: [],//游戏种类栏数据

      screenInfo: {
        createTime: [],
        sort: [{key: '', sort: 0}, {key: '', sort: 0}, {key: '', sort: 0}]
      },
      tableData: [],
      downOption: {},
      upOption: {
        page: {
          num: 0,
          size: 10 // 每页数据的数量,默认10
        },
        noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
        empty: {
          tip: '~ 空空如也 ~'
        }
      }
    };
  },
  watch: {
    tabIndex(i) {
      let _that = this
      _that.accessList = []
      _that.mescroll.resetUpScroll()
    }
  },
  onLoad(opt) {
    // 隐藏底部tabBar
    uni.hideTabBar({
      animation: false, // 是否需要动画效果
    });

    let _that = this
    _that.listGame()
  },
  onShow() {
    let _that = this
    _that.listGame()
    if (_that.mescroll) _that.mescroll.resetUpScroll()
  },
  methods: {
    baseUrl() {
      return baseUrl
    },
    changeTab(index) {
      this.tabIndex = index;
    },
    listGame() {
      let _that = this
      listGame().then((res) => {
        _that.tabData = res.rows
      })
    },
    /*下拉刷新的回调 */
    downCallback() {
      this.mescroll.resetUpScroll()
    },
    /* 上拉翻页 */
    upCallback(page) {
      let _that = this
      let data = {
        pageNo: page.num,
        pageSize: page.size,
        ..._that.screenInfo,
      }

      listOrder(data).then((res) => {
        console.log(res, 'res')
        _that.mescroll.endSuccess(res.rows.length);
        if (page.num == 1) _that.tableData = [];
        _that.tableData = _that.tableData.concat(res.rows); //追加新数据
      }).catch(err => {
        _that.mescroll.endErr();
      })
    },
    btnNav(url) {
      url && app.btnNav(url)
    },
    toIndex() {
      this.$tab.reLaunch('/pages/index')
      uni.showTabBar({
        animation: false, // 是否需要动画效果
      });
    },


  },
}
</script>

<style lang='scss'>
.page{
  background-color: RGBA(244, 242, 251, 1);
}
.content {
  display: flex;
  flex-direction: column;
}

.top {
  width: 100%;
  height: 100%;
  padding-top: 44px;
  background: #F4F2FB url("https://a-1319987989.cos.ap-guangzhou.myqcloud.com/images/db1c8086deb34fa29f4bf890a515d2de_mergeImage.png") no-repeat;
  background-size: 100%;

}

.tab {
  padding: 10px 24px;
  width: 100%;

  .icon {
    padding: 6px;
    position: absolute;
    left: 24px;
    width: 40px;
    height: 40px;
    color: rgba(255, 255, 255, 1);
  }

  .title {
    display: flex; /* 启用Flex布局 */
    justify-content: center; /* 横向居中 */
    align-items: center; /* 可选，实现垂直居中，如果你的布局需要 */
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 18px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
  }
}

.text-area {
  display: flex;
  margin-top: 20px;

  .cu-item {
    color: #22004B;
    font-size: 28rpx;
  }

}

.item {
  border-bottom: 1px solid #ccc;
  display: flex;

}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}

.scroll-x {
  width: 100%;
  // 设置 white-space 属性为 nowrap，这会导致文本不换行，适合横向滚动的布局
  white-space: nowrap;
  margin: 0px -4px;
  padding: 0px 16px;

  view {
    // 设置 display 属性为 inline-block，这会使元素以内联块级元素的方式显示，可以在同一行内显示多个元素
    display: inline-block;
  }
}

.tab-i-sel {
  width: 160rpx;
  height: 160rpx;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.85) 100%);
  border-radius: 16rpx;
  white-space: break-spaces;
  margin: 0px 4px;
}

.tab-i-nor {
  width: 160rpx;
  height: 160rpx;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.25) 100%);
  border-radius: 16rpx;
  white-space: break-spaces;
  margin: 0px 4px;
}

.tab-i-image {
  width: 40px;
  height: 40px;
  margin-top: 10px;
  align-self: center;
}

.tab-i-text {
  overflow-wrap: break-word;
  color: rgba(34, 0, 75, 1);
  font-size: 12px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  line-height: 16px;
  margin-top: 4px;
  padding: 4px 12px 4px 12px;
}

.left-text {
  overflow-wrap: break-word;
  font-family: PingFangSC-Medium;
  font-weight: 600;
  font-size: 14px;
  color: #222222;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  padding: 18px 0px;
}

.right-text {
  background-size: 100% 100%;
  margin-right: 2px;
  padding: 5px 13px 6px 13px;
}

.sex-sel {
  border: 2px solid;
  border-radius: 4px;
  border-image: linear-gradient(270deg, rgba(255, 71, 242, 1), rgba(133, 29, 255, 1), rgba(34, 119, 255, 1)) 1 1;

  margin-left: 4px;
  padding: 5px 13px;
  white-space: nowrap;
  font-family: PingFangSC, PingFang SC;
  font-weight: 550;
  font-size: 12px;
  color: #521DFF;
  line-height: 17px;
  text-align: center;
  font-style: normal;

}

.sex-nor {
  border-radius: 4px;
  border: 1px solid #EEEEEE;

  margin-left: 4px;
  padding: 5px 13px;
  white-space: nowrap;
  font-family: PingFangSC, PingFang SC;
  font-weight: 550;
  font-size: 12px;
  color: #383B40;
  line-height: 17px;
  text-align: center;
  font-style: normal;

}

.div-1 {
  background: #ffffff;
  border-radius: 8px;
  margin: 8px 16px;
  padding-bottom: 8px;
  width: 100% -16px;
}

.div-2 {
  width: 100% -16px;
  height: 144rpx;
  background: linear-gradient(285deg, rgba(34, 119, 255, 0) 40%, rgba(34, 119, 255, 0.1) 70%, rgba(82, 29, 255, 0.1) 100%), #FFFFFF;
  box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(34, 0, 75, 0.02);
  border-radius: 24rpx;
  border: 2rpx solid #FFFFFF;
  margin: 0px 16px;

  padding: 19px 49px 13px 16px;

  view {
    width: 56px;
    height: 13px;
    margin-bottom: 11px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 550;
    font-size: 14px;
    color: RGBA(72, 23, 217, 1);
    line-height: 20px;
    text-align: left;
    font-style: normal;
  }

  text {
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 11px;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
    margin-top: 11px;
  }

}

.div-bot {
  position: fixed;
  bottom: 30px;
  width: 100%
}

.div-cf {
  width: 100% -24px;
  height: 56px;
  background: linear-gradient(201deg, rgba(82, 29, 255, 0.1) 0%, rgba(34, 119, 255, 0.1) 20%, rgba(34, 119, 255, 0) 40%), #FFFFFF;
  box-shadow: 0px 4px 12px 0px rgba(34, 0, 75, 0.08);
  border-radius: 8px;
  border: 1px solid #FFFFFF;
  margin: 0px 12px;
  padding: 8px 8px 8px 16px;


}

.btn {
  width: 120px;
  height: 40px;
  background: linear-gradient(270deg, #521DFF 0%, #2277FF 100%);
  border-radius: 4px;
  margin: 1px 0 1px 0;
  padding: 8px 28px 8px 28px;

  text {
    width: 64px;
    height: 24px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 24px;
    text-align: center;
    font-style: normal;
  }
}

.text-d {
  display: flex; /* 启用Flex布局 */
  justify-content: center; /* 横向居中 */
  align-items: center; /* 可选，实现垂直居中，如果你的布局需要 */
  margin-bottom: 10px;
  color: rgba(82, 29, 255, 1);
  font-size: 12px;
}

.text_12 {
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 10px;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 16px;
  margin: 2px 13px 0 0;
}
</style>
